<template>
  <div id="index">
    <router-link
      :to="`/content:${item.id}`"
      tag="div"
      class="Router-div"
      v-for="(item,index) in list"
      :key="index"
    >
      <div class="images">
        <!-- <img :src="item.images.samll" /> -->
        <img :src="item.images.small" alt="豆瓣图片不给用,凑合凑合" title="豆瓣图片不给用,凑合凑合" />
      </div>
      <div class="contents">
        <p class="points">
          <span>{{item.title}}</span>
          <span>{{item.rating.average}}</span>
        </p>
        <p>
          类型:
          <span v-for="genre in item.genres" :key="genre.id">{{genre}}、</span>
        </p>
        <p>
          导演:
          <span v-for="director in item.directors" :key="director.id">{{director.name}}</span>
        </p>
        <p>
          演员:
          <span v-for="cast in item.casts" :key="cast.id">{{cast.name}}、</span>
        </p>
        <p>{{item.year}}年作品</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import store from "../vuex/store";
export default {
  name: "index",
  data() {
    return {
      list: [],
      myUrl: "in_theaters",
      count: 10,
      start: 0
    };
  },
  methods: {
    Request() {
      var url =
        "http://api.douban.com/v2/movie/" +
        this.$store.state.url +
        "?apikey=0df993c66c0c636e29ecbb5344252a4a&" +
        this.start +
        "=0&" +
        this.count +
        "=20&tdsourcetag=s_pcqq_aiomsg&qq-pf-to=pcqq.c2c";
      this.$http
        .jsonp(url)
        .then(res => {
          // console.log(res.body.subjects);

          this.list = res.body.subjects;

          // this.$store.state.list = res.body.subjects;

          this.$store.commit("savaList", res.body.subjects);
          // console.log(this.$store.state.list);
        })
        .catch(err => {
          console.log("连接失败请找管理员");
        });
    }
  },
  created() {
    this.$store.commit("changeUrl", this.myUrl);
  },
  mounted() {
    // console.log(this.$store.state.list);
    var datas = this.$store.state.list;
    // console.log(datas.length);
    if (datas.length > 0) {
      this.list = this.$store.state.list;
      // alert(2);
    } else {
      this.Request();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
</style>

